import React, { useEffect, useState } from "react";
import { Tag } from "antd-mobile";
import HotMovie from "./HotMovie";
import FilmPreview from "./FilmPreview";
import Theatre from "./Theatre";
import { useNavigate } from "react-router";
import {
  hotMovieQuery,
  filmPreviewQuery,
  theatreQuery,
  theatredetail,
} from "../../service/movieService";

export default function MovieMain() {
  let history = useNavigate();
  let [hotList, setHotList] = useState([]);
  let [preList, setPreList] = useState([]);
  let [theatreList, setTheatreList] = useState([]);
  useEffect(() => {
    (async () => {
      let res = await hotMovieQuery();
      setHotList(res.data.rows.splice(1, res.data.rows.length));
      // console.log(data);
    })();
  }, []);

  useEffect(() => {
    (async () => {
      let res = await theatreQuery();
      setTheatreList(res.data.rows);
      console.log(res);
    })();
  }, []);

  useEffect(() => {
    (async () => {
      let res = await filmPreviewQuery();
      setPreList(res.data.rows);
      // console.log(data);
    })();
  }, []);

  return (
    <div>
      <div className="hotMoive">
        <div className="hotMoive_region">
          <div className="title">热映影片</div>
          <div className="list">
            {hotList.map((item: any,index) => {
              return (
                <div
                  className="item"
                  key={index}
                  onClick={() => {
                    history("/movie/detail/" + item.id);
                  }}
                >
                  <div className="image">
                    <img src={"/api2" + item.cover} alt="" />
                    <div className="sign">评分 {item.score}</div>
                  </div>
                  <div className="name">{item.name}</div>
                  <div className="btn">购票</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <div className="hotMoive">
        <div className="hotMoive_region">
          <div className="title">即将上映</div>
          <div className="list">
            {preList.map((item: any,index) => {
              return (
                <div
                  className="item"
                  key={index}
                  onClick={() => {
                    // history("/movie/detail/" + item.id);
                  }}
                >
                  <div className="image">
                    <img src={"/api2" + item.cover} alt="" />
                    <div className="sign">{item.likeNum | 0} 人想看</div>
                  </div>
                  <div className="name">{item.name}</div>
                  <div className="btn2">预售</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <div className="theatre">
        <div className="theatre_region">
          <div className="title">热门影院</div>
          <div className="list">
            {theatreList.map((item: any) => {
              return (
                <div
                  className="item"
                  key={item.id}
                  onClick={() => {
                    history("/movie/theatre/detail/" + item.id);
                  }}
                >
                  <div className="name">{item.name}</div>
                  <div className="info">
                    <div className="left">
                      好评度 {item.score}% {item.address}
                    </div>
                    <div className="right">{item.distance}</div>
                  </div>
                  <div className="tag">
                    <div className="items">
                      <Tag color="primary" fill="outline">
                        影院卡
                      </Tag>
                    </div>
                    <div className="items">
                      <Tag color="danger" fill="outline">
                        显示特价票
                      </Tag>
                    </div>
                    <div className="items">
                      <Tag color="#cbd0db" fill="outline">
                        可改签
                      </Tag>
                    </div>
                    <div className="items">
                      <Tag color="#cbd0db" fill="outline">
                        可停车
                      </Tag>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      {/* <Tabs>
        <Tabs.Tab title='热映' key='hotMovie'>
          <HotMovie list={hotList}></HotMovie>
        </Tabs.Tab>
        <Tabs.Tab title='影院' key='theatre'>
          <Theatre list={theatreList}></Theatre>
        </Tabs.Tab>
        <Tabs.Tab title='待映' key='preFilm'>
        <FilmPreview list={preList}></FilmPreview>
        </Tabs.Tab>
      </Tabs> */}
    </div>
  );
}
